<script setup lang="ts">
import type { RecommendRows, LikeConfig, TypeLike } from '@/types/consult'
import { ref } from 'vue'

const props = defineProps<{
  item: RecommendRows
  type: TypeLike
  id: string
}>()
const paramsConfig = ref<LikeConfig>({
  type: props.type,
  id: props.id
})
</script>

<template>
  <div class="recommend-item-page">
    <van-image width="58" height="58" round :src="item.avatar" />
    <p class="doctor-name">{{ item.name }}</p>
    <p class="location">{{ item.hospitalName }} {{ item.depName }}</p>
    <p class="title">{{ item.gradeName }}</p>
    <DP-like
      class="btn"
      :item="item"
      round
      :paramsConfig="paramsConfig"
    ></DP-like>
  </div>
</template>

<style lang="scss" scoped>
.recommend-item-page {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  // justify-content: center;
  width: 105px;
  padding: 15px;
  height: 160px;
  background-color: #fff;
  border-radius: 15px;
  margin-left: 15px;
  .doctor-name {
    font-size: 13px;
    margin: 5px 0;
  }
  .location,
  .title {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
    color: var(--cp-tip);
    text-align: center;
    margin-bottom: 3px;
  }
  .btn {
    position: absolute;
    bottom: 20px;
  }
}
</style>
